<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script>
import { L2Dwidget } from 'live2d-widget'
export default {
  created() {
    setTimeout(function () {
      L2Dwidget.init({
        model: {
          jsonPath: 'https://cdn.jsdelivr.net/gh/wangsrGit119/wangsr-image-bucket/L2Dwidget/live2d-widget-model-koharu/assets/koharu.model.json',
        },
        display: { //人物的属性配置
          position: 'left',
          width: 250,
          height: 500,
          hOffset: 0, // 横向偏移
          vOffset: 0 // 纵向偏移
        },
      });
    }, 1000);
  },
  mounted() {
    document.addEventListener("click", this.hidePasswordInput);
    const script = document.createElement("script");
    script.innerHTML = `
      (function() {
        var a_idx = 0;
        window.onclick = function(event) {
          var a = new Array(
            "❤樱岛麻衣❤",
            "❤小鸟游六花❤",
            "❤一花❤",
            "❤二乃❤",
            "❤三玖❤",
            "❤四叶❤",
            "❤五月❤",
            "❤坤坤❤",
            "❤你干嘛❤",
            "❤哎哟❤",
            "❤中分头❤",
            "❤背带裤❤",
            "❤我是❤",
            "❤ikun❤",
            "❤你记住❤",
          );
          var heart = document.createElement("b");
          heart.onselectstart = new Function('event.returnValue=false');
          document.body.appendChild(heart).innerHTML = a[a_idx];
          a_idx = (a_idx + 1) % a.length;
          heart.style.cssText = "position: fixed;left:-100%;";

          var f = 16,
            x = event.clientX - f / 2,
            y = event.clientY - f,
            c = randomColor(),
            a = 1,
            s = 1.2;
          var timer = setInterval(function() {
            if (a <= 0) {
              document.body.removeChild(heart);
              clearInterval(timer);
            } else {
              heart.style.cssText = "font-size:16px;cursor:default;position:fixed;color:" +
                c +
                ";left:" +
                x +
                "px;top:" +
                y +
                "px;opacity:" +
                a +
                ";transform:scale(" +
                s +
                ");";
              y--;
              a -= 0.016;
              s += 0.002;
            }
          }, 15);
        };

        function randomColor() {
          return (
            "rgb(" +
            ~~(Math.random() * 255) +
            "," +
            ~~(Math.random() * 255) +
            "," +
            ~~(Math.random() * 255) +
            ")"
          );
        }
      })();
    `;
    document.body.appendChild(script);
  }
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

body {
  background-image: url('../src/assets/2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100vh;
  /* 占满全屏 */
  margin: 0;
  padding: 0;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.input-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  border-radius: 4px;
  z-index: 10000;
}

/* 点击输入框外部区域时隐藏输入框和遮罩层 */
.hide-input {
  display: none;
}
</style>
